<script setup lang="ts">
import GlobalHeader from "@/components/GlobalHeader.vue";
</script>

<template>
  <div class="basic-layout">
    <a-layout>
      <a-layout-header class="header">
        <GlobalHeader />
      </a-layout-header>

      <a-layout-content class="content">
        <div class="content-wrapper">
          <RouterView />
        </div>
      </a-layout-content>

      <a-layout-footer class="footer">
        <div class="footer-content">
          <a
            href="https://gitee.com/wangfenghuan3399"
            class="footer-link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <icon-link />
            <span>Gitee 开源仓库</span>
          </a>
          <div class="copyright">© 2025 GetJudgeX 保留所有权利</div>
        </div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped lang="less">
.basic-layout {
  min-height: 100vh;

  .header {
    padding: 0;
    height: auto;
    background: transparent;
    z-index: 1000;
  }

  .content {
    flex: 1;
    padding: 24px;
    background: linear-gradient(
      135deg,
      rgba(247, 249, 252, 0.98) 0%,
      rgba(240, 242, 245, 0.97) 100%
    );

    .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 24px;
      min-height: calc(100vh - 160px);
    }
  }

  .footer {
    background: linear-gradient(135deg, #2b3a52 0%, #1d2735 100%);
    color: rgba(255, 255, 255, 0.85);
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .footer-link {
      color: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;

      &:hover {
        color: #7fffd4;
        transform: translateY(-1px);
      }

      span {
        font-weight: 500;
      }
    }

    .copyright {
      font-size: 12px;
    }
  }
}

@media (max-width: 768px) {
  .basic-layout {
    .content {
      padding: 12px;

      .content-wrapper {
        padding: 16px;
        min-height: calc(100vh - 140px);
      }
    }

    .footer {
      padding: 16px 0;
      font-size: 13px;

      .footer-link {
        flex-direction: column;
        text-align: center;
      }
    }
  }
}
</style>
